<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>OpenBox</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/style.default.css" id="theme-stylesheet">
    <link rel="stylesheet" href="/static/css/custom.css">
    <style>
        html, body {
            margin: 0;
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }
         p {
        font-size:2px;
        background: linear-gradient(to right, #4fbfa8, #016cbe);
        -webkit-background-clip: text;
        color: transparent;
        text-align:center
   }

    </style>
</head>

<body>

<div class="login-form" style="width:30%">

    <div class="box form-area">
         <div align="center">
             <img src="/static/img/logo-big.jpg" alt="Obaju logo" class="d-none d-md-inline-block" width="70%">
        </div>
        <p>Generalized and Efficient Blackbox Optimization System.</p>
        {% if change_password == 0%}
        <div class="form-group">
            <label for="email">Email</label>
            <input id="email" type="text" class="form-control">
        </div>
        <div class="text-center">
            <button type="button" class="btn btn-primary" id="reset"><i
                    class="fa fa-sign-in"></i>Send password reset email
            </button>
        </div>
        {% else %}
        <div class="form-group">
            <label for="password"  >Password</label>
            <input id="password" type="password" class="form-control">
            <label for="c_password">Confirm password</label>
            <input id="c_password" type="password" class="form-control">
        </div>
        <div class="text-center">
            <button type="button" class="btn btn-primary" id="reset"><i
                    class="fa fa-sign-in"></i>Change password
            </button>
        </div>
        {% endif %}
    </div>
</div>

<script src="/static/vendor/jquery/jquery.js"></script>
<script src="/static/vendor/jquery/jquery.md5.js"></script>
<script src="/static/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="/static/js/common.js"></script>
<script>

    $("#reset").click(function () {

        var change_password = "{{change_password}}" =='' ? 0 : "{{change_password}}"   == "1" ? 1 : 0;
        var token = "{{ token }}" == '' ? '' : "{{ token }}";
        var is_send_mail = 1;
        if (change_password === 0) {
            var email = $("#email").val();
            if (!isAvailableEmail(email)) {
                alert("Email format is incorrect！");
                return false;
            }
            var data = {'email': email, 'is_send_mail':is_send_mail};
        } else {
            var password = $("#password").val();
            var c_password = $("#c_password").val();
            if (password == "") {
                alert("Password is required！");
                return false;
            }
            if(password.length < 6){
                alert('Make sure password\'s length at least 6 characters');
                return;
            }
            if (c_password == "") {
                alert("Confirm password is required！");
                return false;
            }
            if(c_password != password){
                alert("Password and Confirm password must be the same!");
                return false;
            }
            is_send_mail = 0;
            password = $.md5(password);
            var data = {'password': password, 'token' :token, 'is_send_mail':is_send_mail};
        }
        $("#reset").attr('disabled',true);
        $.ajax({
            url: "/user_board/api/reset_password/",
            type: "POST",
            data: data,
            success: function (data) {
                if (data['code'] == 0) {
                    $("#reset").removeAttr('disabled');
                    alert(data['msg']);
                } else {
                    if(is_send_mail === 0){
                        window.location.href = '/user_board/index';
                    }else{
                        alert(data['msg'])
                    }
                }
            },
            error: function () {
                alert('Network Error');
            }
        });
    });
</script>
</body>

</html>